<template>
  <div
    id="poetry"
    :style="{
      'margin-bottom': Object.keys(getMusic).length == 0 ? '50px' : '116px',
    }"
  >
    <div id="title">
      {{ poetry.title }}
    </div>
    <div id="author">{{ poetry.writer }} - {{ poetry.dynasty }}</div>
    <div id="content">
      {{ poetry.content }}
    </div>
    <div id="appreciation">
      赏析：{{ poetry.appreciation.replace(/\s+/g, "") }}
    </div>
    <div id="translation">翻译：{{ poetry.translation }}</div>

    <!-- appreciation
    detailIntro
    translation -->
    <TabBar />
  </div>
</template>

<script>
// 每个栏目都需要
import { mapGetters } from "vuex"; //播放器状态
import TabBar from "@/components/common/TabBar";
import { ifTabBar } from "@/common/mixin";

// api
import { getPoetry } from "@/api/poetry";

export default {
  data() {
    return {
      poetry: {},
    };
  },
  components: {
    TabBar,
  },
  computed: {
    ...mapGetters(["getMusic", "getAudio"]),
  },
  mixins: [ifTabBar],
  created() {
    this.getPoetry();
  },
  methods: {
    getPoetry() {
      const radNum = Math.floor(Math.random() * 1000 + 1);
      getPoetry(radNum).then((res) => {
        this.poetry = res.result[0];
      });
    },
  },
};
</script>

<style lang='less' scoped>
#poetry {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  #title {
    font-size: 30px;
    font-weight: bold;
    // padding:0 5px;
  }
  #author {
    margin-top: 5px;
    color: #666666;
    // font-size: 15px;
  }
  #content,
  #appreciation,
  #translation {
    margin-top: 10px;
    padding: 5px 10px;
    line-height: 25px;
  }
}
</style>

